<template>
    <div class="home-container">
        <Header />

        <div class="main-content">
            <!-- 轮播图 -->
            <el-carousel :height="carouselHeight" :autoplay="false"   type="card" arrow="always" v-if="banners.length > 0">
                <el-carousel-item v-for="banner in banners" :key="banner.id">
                    <a :href="banner.linkUrl" target="_blank">
                        <img :src="banner.imageUrl" :alt="banner.title" class="carousel-image" />
                    </a>
                </el-carousel-item>
            </el-carousel>

            <!-- 精选课程 -->
            <section class="featured-courses">
                <div class="section-header">
                    <h2>精选课程</h2>
                    <a href="/course" class="more-link">更多 ></a>
                </div>

                <div class="course-grid">
                    <el-card v-for="course in courses.slice(0, 15)" :key="course.id" class="course-card" shadow="hover">
                        <router-link :to="course.courseUrl || '/'">
                            <img :src="course.coverUrl" alt="course.name" class="course-cover" />
                            <div class="course-info">
                                <p class="course-name">{{ course.name }}</p>
                                <p class="course-count">播放量: {{ course.count }}</p>
                            </div>
                        </router-link>
                    </el-card>
                </div>
            </section>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { getBanners, getCourse } from '@/api/home'
import { loadImage } from '@/api/file'

const banners = ref([])
const courses = ref([])

// 响应式高度：根据屏幕宽度动态调整
const carouselHeight = computed(() => {
    const width = window.innerWidth
    if (width <= 767) return '300px'
    if (width <= 991) return '400px'
    if (width <= 1199) return '500px'
    return '600px'
})

// 获取轮播图数据并处理图片路径
const fetchBanners = async () => {
    try {
        const res = await getBanners()

        if (!Array.isArray(res.data)) {
            console.error('轮播图数据不是数组:', res)
            return
        }

        // 并行下载所有图片并转为 blob url
        const processedBanners = await Promise.all(
            res.data.map(async (banner) => {
                const url = await loadImage(banner.imageUrl, '/default-banner.png')
                return { ...banner, imageUrl: url }
            })
        )

        banners.value = processedBanners
    } catch (error) {
        console.error('获取轮播图失败:', error)
    }
}

// 获取精选课程数据
const fetchCourses = async () => {
    try {
        const res = await getCourse()
        console.debug(res.data)

        if (res.code === 100 && Array.isArray(res.data)) {
            // 处理封面图路径
            const processedCourses = await Promise.all(
                res.data.map(async (course) => {
                    const coverUrl = await loadImage(course.coverUrl, '/default-course.jpg')
                    return { ...course, coverUrl }
                })
            )
            courses.value = processedCourses
        } else {
            console.warn('获取课程列表失败或格式错误', res)
        }
    } catch (error) {
        console.error('获取课程失败:', error)
    }
}

onMounted(() => {
    fetchBanners()
    fetchCourses()
})
</script>
<style lang="scss" scoped>
.home-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

.featured-courses {
    margin-top: 40px;

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
            font-size: 24px;
            color: #333;
            margin: 0;
        }

        .more-link {
            font-size: 14px;
            color: #666;
            text-decoration: none;

            &:hover {
                color: #007bff;
            }
        }
    }

    .course-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr); // 固定 5 列
        gap: 20px;
    }

    @media (max-width: 991px) {
        .course-grid {
            grid-template-columns: repeat(3, 1fr); // 小屏下 3 列
        }
    }

    @media (max-width: 767px) {
        .course-grid {
            grid-template-columns: repeat(2, 1fr); // 更小屏下 2 列
        }
    }

    .course-card {
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;

        &:hover {
            transform: translateY(-5px);
        }

        a {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .course-cover {
            width: 100%;
            height: 140px;
            object-fit: cover;
            border-radius: 4px;
        }

        .course-info {
            padding: 10px;

            .course-name {
                font-size: 16px;
                font-weight: bold;
                margin: 0 0 5px;
                color: #333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .course-count {
                font-size: 14px;
                color: #888;
                margin: 0;
            }
        }
    }
}

:deep(.el-carousel__item img) {
    
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background-color: #f5f5f5;
}

:deep(.el-carousel) {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;

    .el-carousel__container {
        height: v-bind(carouselHeight);
    }

    .el-carousel__item {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;

        img.carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
    }
}
</style>